<template>
  <div class="page">
    <c-title :hide="false" text="健康咨询"></c-title>
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item v-for="(item, index) in pricList" :key="index"><img :src="item.thumb" /></van-swipe-item>
      </van-swipe>
      <!-- </div> -->
      <div class="middlebox">
        <van-swipe class="my-swipe" :autoplay="3000" vertical style="height: 1rem" :show-indicators="false">

          <van-swipe-item v-for="(item, index) in wzList" :key="index">
            <van-col span="4" style="float: left;width: 50%;text-align: left;">{{ item.title }}</van-col>
            <van-col span="4" style="float: right" class="xq" @click="xq(item.id)">查看详情</van-col>
          </van-swipe-item>
        </van-swipe>

      </div>
    </div>
    <div class="bh">
      <div class="menubox">
        <div class="menu" @click="mfzx">免费咨询</div>
        <div class="menu">视频问诊</div>
        <div class="menu">电话咨询</div>
      </div>
      <div class="hdzq">
        <img src="../../assets/images/goods/zx.png" alt="" />
      </div>
      <div class="titlemenu">
        <input :class="classid == 0 ? 'menulistcli' : 'menulist'" type="button" value="全部" @click="menuclick(0)" />
        <div v-for="(item, index) in kmList" :key="index">
          <input :class="classid == item.id ? 'menulistcli' : 'menulist'" type="button" :value="item.name"
            @click="menuclick(item.id)" />
        </div>
      </div>
      <div class="yscontent" v-if="jList.length != 0">
        <div class="yslist" v-for="(item, index) in jList" :key="index">
          <img :src="item.avator" alt="" />
          <div class="middle">
            <div class="top">
              <div class="name">{{ item.name }}</div>
              <div class="kemu">{{ item.cate_name }}</div>
            </div>
            <div class="bot">

              <div class="info">
                {{item.info}}
              </div>
              <div class="address">
                {{ item.address }}
              </div>
            </div>
          </div>
          <div class="r">
            <div class="zx" @click="zx(item.uid)">咨询</div>
          </div>
        </div>
      </div>
    </div>


    <van-popup v-model="mfzxshow" round="true" position="bottom">

      <van-picker show-toolbar title="选择医师" :columns="columns" @confirm="onConfirm" @cancel="mfzxshow = false"
        value-key="name" />
    </van-popup>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mfzxshow: false,
        columns: [],
        pricList: [],
        wzList: [],
        hdpic: {},
        jList: [],
        id: null,
        classid: 0,
        kmList: []
      };
    },
    activated() {
      this.getLsit();
      this.getys();
      this.getuser();
    },
    methods: {
      onConfirm(e) {
        console.log(e, '11')
        this.$router.push(this.fun.getUrl("khda", {}, {
          id: e.uid
        }));
      },
      mfzx() {
        this.mfzxshow = true
      },
      zx(id) {
        let ids = this.id;
        this.$router.push(this.fun.getUrl("jstx", {}, {
          ids,
          id
        }));
      },
      getuser() {
        $http.post("member.member.member-data").then(response => {
          this.id = response.data.member.uid;
        });
      },
      menuclick(id) {
        this.classid = id;
        this.getys(id);
      },
      getLsit() {
        $http
          .post("plugin.store-cashier.frontend.store.store-picture.get-list", {
            //顶部轮播
            category_id: 7
          })
          .then(response => {
            console.log(response);
            this.pricList = response.json;
          });
        $http
          .post("plugin.store-cashier.frontend.store.store-article.get-list", {
            //文章详情
            category_id: 7
          })
          .then(response => {
            console.log(response);

            this.wzList = response.json;
            console.log(this.wzList)
          });
        $http
          .post("plugin.store-cashier.frontend.store.store-picture.get-list", {
            //顶部
            category_id: 10
          })
          .then(response => {
            this.hdpic = response.json[0];
          });
      },
      xq(act_id) {
        this.$router.push(this.fun.getUrl("wzxq", {}, {
          act_id
        }));
      },
      getys() {
        $http
          .post("plugin.hft-hospital.api.index.doctor_list", {
            department_id: this.classid
          })
          .then(response => {
            console.log(response)
            this.jList = response.data.doctor_list.data;
            this.columns = response.data.doctor_list.data
          });
        $http.post("plugin.hft-hospital.api.index.department_list", {}).then(response => {
          this.kmList = response.data;
        });
      }
    }
  };
</script>

<style scoped lang="scss">
  .page {
    height: 100%;
    background-color: #fff;

    .my-swipe .van-swipe-item {
      img {
        height: 10rem;
        width: 100%;
      }
    }

    .xq {
      color: #1989fa;
    }

    .bh {
      background-color: #f2f2f2;
      padding: 0.3rem;

      .yscontent {
        .yslist {
          display: flex;
          padding: 0.5rem;
          border-bottom: 0.01rem dashed #000;

          img {
            width: 5rem;
            height: 5rem;
            border-radius: 3rem;
            margin-left: 1rem;
          }

          .r {
            .zx {
              border: 0.01rem solid #000;
              border-radius: 0.5rem;
              padding: 0.3rem;
              background-color: #fff;
              font-size: 0.4rem;
              margin-top: 1rem;
              width: 3rem;
            }
          }

          .middle {
            width: 68%;

            .bot {
              // font-weight: 600;
              // display: flex;

              text-align: left;
              .address{
                font-weight: 600;
              }
            }

            .top {
              margin-bottom: 0.5rem;

              .name {
                font-weight: 600;
                // margin: 0rem 0rem 0rem 1rem;
              }

              .kemu {
                margin-left: 1rem;
                color: #169bd5;
              }

              display: flex;
            }
          }

          .img {
            margin-right: 0.5rem;

            img {
              width: 3rem;
              height: 3rem;
            }
          }
        }
      }

      .titlemenu {
        display: flex;
        margin: 0.5rem 1rem 0rem 1rem;

        .menulistcli {
          background-color: #169bd5;
          color: #fff;
          margin-right: 1rem;
          padding: 0.2rem;
          border-radius: 0.5rem;
        }

        .menulist {
          margin-right: 1rem;
          border: 0.01rem solid #000;
          padding: 0.2rem;
          border-radius: 0.5rem;
          background-color: #fff;
        }
      }

      .hdzq {
        img {
          margin-top: 1rem;
          width: 100%;
        }
      }

      .menubox {
        display: flex;
        padding: 0.3rem 0.5rem;
        justify-content: space-around;
        border: 0.01rem solid #000;
        background-color: #fff;
        margin-top: 0.5rem;

        .menu {
          border-radius: 50%;
          width: 3.2rem;
          height: 3.2rem;
          text-align: center;
          border: 0.01rem solid #000;
          padding: 0.5rem;
          font-size: 0.8rem;
        }
      }
    }

    .middlebox {
      background-color: #f2f2f2;
      padding: 0.5rem;

      .my-swipe {
        line-height: 1rem;
      }

      .item {
        display: flex;
        justify-content: space-between;
        padding: 0.5rem;
      }

      .title {
        font-weight: 600;
        margin: 1rem 0;
      }
    }
  }
</style>
